<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>CSS2中的可视化格式模型(2)_Visual fomatting model in CSS2(2) | 宅鱼</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="google-site-verification" content="yH7MwnMb7LXru16F4FAfY94pn-oZLhF8Szu4PuL7Oxw" />
  <meta name="description" content="9.7 ‘display’,’position’和’float’间的相互关系 Relationships between ‘display’, ‘position’, and ‘float’影响盒子的生成和布局的三个属性——‘display’,’position’和’float’——间的相互关系如下:  如果’display’值为’none’,那么’position’和’float’无效,元素不生">
<meta name="keywords" content="CSS,w3c标准,翻译">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS2中的可视化格式模型(2)_Visual fomatting model in CSS2(2)">
<meta property="og:url" content="http://ikkkr.com/2011/08/19/css2-e4-b8-ad-e7-9a-84-e5-8f-af-e8-a7-86-e5-8c-96-e6-a0-bc-e5-bc-8f-e6-a8-a1-e5-9e-8b2-visual-fomatting-model-in-css22/index.html">
<meta property="og:site_name" content="宅鱼">
<meta property="og:description" content="9.7 ‘display’,’position’和’float’间的相互关系 Relationships between ‘display’, ‘position’, and ‘float’影响盒子的生成和布局的三个属性——‘display’,’position’和’float’——间的相互关系如下:  如果’display’值为’none’,那么’position’和’float’无效,元素不生">
<meta property="og:locale" content="default">
<meta property="og:image" content="http://www.w3.org/TR/CSS21/images/flow-generic.png">
<meta property="og:image" content="http://www.w3.org/TR/CSS21/images/flow-relative.png">
<meta property="og:image" content="http://www.w3.org/TR/CSS21/images/flow-float.png">
<meta property="og:image" content="http://www.w3.org/TR/CSS21/images/flow-clear.png">
<meta property="og:image" content="http://www.w3.org/TR/CSS21/images/flow-clear2.png">
<meta property="og:image" content="http://www.w3.org/TR/CSS21/images/flow-absolute.png">
<meta property="og:image" content="http://www.w3.org/TR/CSS21/images/flow-abs-rel.png">
<meta property="og:image" content="http://www.w3.org/TR/CSS21/images/flow-static.png">
<meta property="og:image" content="http://www.w3.org/TR/CSS21/images/changebar.png">
<meta property="og:updated_time" content="2018-04-01T12:38:40.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS2中的可视化格式模型(2)_Visual fomatting model in CSS2(2)">
<meta name="twitter:description" content="9.7 ‘display’,’position’和’float’间的相互关系 Relationships between ‘display’, ‘position’, and ‘float’影响盒子的生成和布局的三个属性——‘display’,’position’和’float’——间的相互关系如下:  如果’display’值为’none’,那么’position’和’float’无效,元素不生">
<meta name="twitter:image" content="http://www.w3.org/TR/CSS21/images/flow-generic.png">
  
    <link rel="alternative" href="/atom.xml" title="宅鱼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.ico"  type="image/x-ico">
   
  <link rel="stylesheet" href="/css/style.css">
  

</head>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">宅鱼</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/" id="subtitle">部落格</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">首页</a>
        
          <a class="main-nav-link" href="/archives">文章</a>
        
          <a class="main-nav-link" href="/raincss">RainCSS</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://ikkkr.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-css2-e4-b8-ad-e7-9a-84-e5-8f-af-e8-a7-86-e5-8c-96-e6-a0-bc-e5-bc-8f-e6-a8-a1-e5-9e-8b2-visual-fomatting-model-in-css22" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2011/08/19/css2-e4-b8-ad-e7-9a-84-e5-8f-af-e8-a7-86-e5-8c-96-e6-a0-bc-e5-bc-8f-e6-a8-a1-e5-9e-8b2-visual-fomatting-model-in-css22/" class="article-date">
  <time datetime="2011-08-18T16:02:19.000Z" itemprop="datePublished">2011-08-19</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      CSS2中的可视化格式模型(2)_Visual fomatting model in CSS2(2)
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="9-7-‘display’-’position’和’float’间的相互关系-Relationships-between-‘display’-‘position’-and-‘float’"><a href="#9-7-‘display’-’position’和’float’间的相互关系-Relationships-between-‘display’-‘position’-and-‘float’" class="headerlink" title="9.7 ‘display’,’position’和’float’间的相互关系 Relationships between ‘display’, ‘position’, and ‘float’"></a>9.7 ‘display’,’position’和’float’间的相互关系 Relationships between ‘display’, ‘position’, and ‘float’</h3><p>影响盒子的生成和布局的三个属性——‘display’,’position’和’float’——间的相互关系如下:</p>
<ol>
<li>如果’display’值为’none’,那么’position’和’float’无效,元素不生成盒子.</li>
<li>否则,如果’postion’值为’absolute’或者’fixed’,盒子绝对地定位’float’计算的值为’none’,并且      display根据下面的表格进行设定.盒子的位置由’top’, ‘right’, ‘bottom’和’left’属性和包含块决定.</li>
<li>否则,如果’float’的值不是’none’,该盒子是浮动的,且’display’值根据下面的表格进行设定.</li>
<li>否则,如果元素是根元素,’display’值根据下面的表格进行设定,除了其在CSS2.1里面没有定义是否’list-item’的指定值成为’block’或者’list-item’计算值.</li>
<li>否则,应用指定的其它’display’属性.<table border="1"><br><tbody><br><tr><br><th>指定值 Specified value</th><br><th>计算值 Computed value</th><br></tr><br><tr><br><td>inline-table</td><br><td>table</td><br></tr><br><tr><br><td>inline, table-row-group, table-column,       table-column-group, table-header-group, table-footer-group, table-row,       table-cell, table-caption, inline-block</td><br><td>block</td><br></tr><br><tr><br><td>others</td><br><td>same as specified</td><br></tr><br></tbody><br></table>

</li>
</ol>
<h3 id="9-8-常规流向，浮动和绝对定位的对比-Comparison-of-normal-flow-floats-and-absolute-positioning"><a href="#9-8-常规流向，浮动和绝对定位的对比-Comparison-of-normal-flow-floats-and-absolute-positioning" class="headerlink" title="9.8 常规流向，浮动和绝对定位的对比 Comparison of normal flow, floats, and absolute positioning"></a>9.8 常规流向，浮动和绝对定位的对比 Comparison of normal flow, floats, and absolute positioning</h3><p>为了演示常规流向，相对定位，浮动和绝对定位间的区别，我们提供一系列的例子，它们都基于如下的HTML片段:</p>
<p>&lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”&gt;<br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Comparison of positioning schemes&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;P&gt;Beginning of body contents.<br>&lt;SPAN id=”outer”&gt; Start of outer contents.<br>&lt;SPAN id=”inner”&gt; Inner contents.&lt;/SPAN&gt;<br>End of outer contents.&lt;/SPAN&gt;<br>End of body contents.<br>&lt;/P&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;</p>
<p>在文档中，我们假定有如下规则:</p>
<p>body { display: block; font-size:12px; line-height: 200%;<br>width: 400px; height: 400px; }<br>p    { display: block;}<br>span { display: inline; }</p>
<h4 id="9-8-1-常规流向-Normal-flow"><a href="#9-8-1-常规流向-Normal-flow" class="headerlink" title="9.8.1 常规流向 Normal flow"></a>9.8.1 常规流向 Normal flow</h4><p>考虑如下的outer和inner的CSS声明，它们并不改变<a href="http://www.w3.org/TR/CSS21/visuren.html#normal-flow" target="_blank" rel="noopener">常规流</a>盒子:</p>
<p>#outer { color: red; }</p>
<p>#inner { color: blue; }</p>
<p>P元素包含所有的行内内容：<a href="http://www.w3.org/TR/CSS21/visuren.html#anonymous" target="_blank" rel="noopener">匿名行内文本</a>以及两个SPAN元素。因此所有的内容将在一个行内格式化内容中得到排列，包含在一个由P元素生成的包含块中，看起来如下图:</p>
<p><img src="http://www.w3.org/TR/CSS21/images/flow-generic.png" alt="Image illustrating the normal flow of text between parent and sibling boxes."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/flow-generic-desc.html" title="Long description for normal flow example" target="_blank" rel="noopener">[D]</a></p>
<h4 id="9-8-2-相对定位-Relative-positioning"><a href="#9-8-2-相对定位-Relative-positioning" class="headerlink" title="9.8.2 相对定位 Relative positioning"></a>9.8.2 相对定位 Relative positioning</h4><p>要看到<a href="http://www.w3.org/TR/CSS21/visuren.html#relative-positioning" target="_blank" rel="noopener">相对定位</a>的效果,我们规定:</p>
<p>#outer { position: relative; top: -12px; color: red; }</p>
<p>#inner { position: relative; top: 12px; color: blue; }</p>
<p>文本正常排列直到outer元素.outer的文本在第一行结尾排列到它的正常流向的位置和尺寸.然后包含文字行内盒(分三行排列)移动了’-12px’单位(向上).</p>
<p>inner的内容,作为outer的子元素,正常地应该紧接”of outer contents”排列(在第1.5行).不过,inner的内容自身相对outer内容偏移’12px’(向下),而回到它原来的位置第二行.</p>
<p>注意跟随在outer之后的内容并不受outer相对定位的影响.</p>
<p><img src="http://www.w3.org/TR/CSS21/images/flow-relative.png" alt="Image illustrating the effects of relative positioning on a box"> <a href="http://www.w3.org/TR/CSS21/images/longdesc/flow-relative-desc.html" title="Long description for relative flow example" target="_blank" rel="noopener">[D]</a></p>
<p>还要注意,如果outer的偏移是’-24px’,那么outer的文本和主体文本会重合.</p>
<h4 id="9-8-3-浮动一个盒-Floating-a-box"><a href="#9-8-3-浮动一个盒-Floating-a-box" class="headerlink" title="9.8.3 浮动一个盒 Floating a box"></a>9.8.3 浮动一个盒 Floating a box</h4><p>现在考虑<a href="http://www.w3.org/TR/CSS21/visuren.html#floats" target="_blank" rel="noopener">浮动</a>inner元素的效果,我们通过如下规则将它的文本向右浮动:</p>
<p>#outer { color: red; }</p>
<p>#inner { float: right; width: 130px; color: blue; }</p>
<p>文本正常排列直到inner盒,它从流向中脱离并浮动到右边距(它的’width’是显式指定的).浮动左边的行盒被缩短,文档的其余文本流入里面.</p>
<p><img src="http://www.w3.org/TR/CSS21/images/flow-float.png" alt="Image illustrating the effects of floating a box."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/flow-float-desc.html" title="Long description of example illustrating floating" target="_blank" rel="noopener">[D]</a></p>
<p>要显示’clear’属性的效果，我们在例子中加入一个同胞元素:</p>
<p>&lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”&gt;<br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Comparison of positioning schemes II&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;P&gt;Beginning of body contents.<br>&lt;SPAN id=outer&gt; Start of outer contents.<br>&lt;SPAN id=inner&gt; Inner contents.&lt;/SPAN&gt;<br>&lt;SPAN id=sibling&gt; Sibling contents.&lt;/SPAN&gt;<br>End of outer contents.&lt;/SPAN&gt;<br>End of body contents.<br>&lt;/P&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;</p>
<p>和如下规则：</p>
<p>#inner { float: right; width: 130px; color: blue; }</p>
<p>#sibling { color: red; }</p>
<p>这就使inner盒和以前一样向右浮动，而文档的其余文本流入空出的地方：</p>
<p><img src="http://www.w3.org/TR/CSS21/images/flow-clear.png" alt="Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/flow-clear-desc.html" title="Long description of example illustrating floating without clear" target="_blank" rel="noopener">[D]</a></p>
<p>但是,如果同胞元素的’clear’属性设置为’right’(即,生成的同胞盒不接受在右边有浮动盒相邻的位置),则同胞的内容在浮动之下开始排列:</p>
<p>#inner { float: right; width: 130px; color: blue; }</p>
<p>#sibling { clear: right; color: red; }</p>
<p><img src="http://www.w3.org/TR/CSS21/images/flow-clear2.png" alt="Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/flow-clear2-desc.html" title="Long description of example illustrating floating with clear" target="_blank" rel="noopener">[D]</a></p>
<h4 id="9-8-4-绝对定位-Absolute-positioning"><a href="#9-8-4-绝对定位-Absolute-positioning" class="headerlink" title="9.8.4 绝对定位 Absolute positioning"></a>9.8.4 绝对定位 Absolute positioning</h4><p>最后，我们考虑<a href="http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning" target="_blank" rel="noopener">绝对定位</a>的效果。考虑如下的outer和inner的CSS声明：</p>
<p>#outer {<br>position: absolute;<br>top: 200px; left: 200px;<br>width: 200px;<br>color: red;<br>}</p>
<p>#inner { color: blue; }</p>
<p>这就使outer盒的顶部的定位基于它的包含块。定位盒的包含块由最靠近的定位的父辈创建(或者，如果不存在这样的父辈，则采用<a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" target="_blank" rel="noopener">初始包含块</a>，就像在本例中)。outer盒的顶部在包含块顶部  ‘200px’之下，左边在包含块左边’200px’。outer盒的子盒的排列相对于outer盒正常排列。</p>
<p><img src="http://www.w3.org/TR/CSS21/images/flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/flow-absolute-desc.html" title="Long description for example illustrating absolute positioning" target="_blank" rel="noopener">[D]</a></p>
<p>下面的例子展示了一个相对定位盒子中的一个绝对定位的子盒。尽管outer父盒并没有实际偏移，设置它的’position’属性为’relative’       意味着这个盒可以作为定位派生内容的包含块。由于outer盒是一个行内盒并跨越几行分布，第一个行内盒的顶和左边(在图形中用粗点线标出)作为      ‘top’和’left’偏移的参考.</p>
<p>#outer {<br>position: relative;<br>color: red;<br>}</p>
<p>#inner {<br>position: absolute;<br>top: 200px; left: -100px;<br>height: 130px; width: 130px;<br>color: blue;<br>}</p>
<p>结果可能看起来是这样的:</p>
<p><img src="http://www.w3.org/TR/CSS21/images/flow-abs-rel.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/flow-abs-rel-desc.html" title="Long description for example illustrating positioning with respect to a positioned ancestor" target="_blank" rel="noopener">[D]</a></p>
<p>如果我们不定位outer盒：</p>
<p>#outer { color: red }</p>
<p>#inner {<br>position: absolute;<br>top: 200px; left: -100px;<br>height: 130px; width: 130px;<br>color: blue;<br>}</p>
<p>inner盒的包含块成为初始包含块(在我们的例子中).下面的例子展示了这种情况下.inner盒最终的位置.</p>
<p><img src="http://www.w3.org/TR/CSS21/images/flow-static.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/flow-static-desc.html" title="Long description illustrating absolute positioning with respect to the initial containing block" target="_blank" rel="noopener">[D]</a></p>
<p>相对和绝对定位可以用来实现变更栏，下例是这一实现的演示。考虑如下文档:</p>
<p>&lt;P style=”position: relative; margin-right: 10px; left: 10px;”&gt;<br>I used two red hyphens to serve as a change bar. They<br>will “float” to the left of the line containing THIS<br>&lt;SPAN style=”position: absolute; top: auto; left: -1em; color: red;”&gt;–&lt;/SPAN&gt;<br>word.&lt;/P&gt;</p>
<p>可能呈现为:</p>
<p><img src="http://www.w3.org/TR/CSS21/images/changebar.png" alt="Image illustrating the use of floats to create a changebar effect."> <a href="http://www.w3.org/TR/CSS21/images/longdesc/changebar-desc.html" title="Long description for change bar example" target="_blank" rel="noopener">[D]</a></p>
<p>首先，该段落(包含块在图形中也显示出来)正常排列.然后它从包含块的左边偏移’10px’(从而为该偏移保留了’10px’的右边距).两个作为变更栏的连字号从常规流向中脱离，并定位在当前行(由于’top:     auto’).相对它的包含块(由最终位置的P创建)的左边移动’-1em’.结果是变更栏看上去”浮动”在当前行的左边.</p>
<h3 id="9-9-分层的呈现-Layered-presentation"><a href="#9-9-分层的呈现-Layered-presentation" class="headerlink" title="9.9 分层的呈现 Layered presentation"></a>9.9 分层的呈现 Layered presentation</h3><h4 id="9-9-1-指定堆叠层次-’z-index’属性-Specifying-the-stack-level-the-‘z-index’-property"><a href="#9-9-1-指定堆叠层次-’z-index’属性-Specifying-the-stack-level-the-‘z-index’-property" class="headerlink" title="9.9.1 指定堆叠层次:’z-index’属性 Specifying the stack level: the ‘z-index’ property"></a>9.9.1 指定堆叠层次:’z-index’属性 Specifying the stack level: the ‘z-index’ property</h4><p><strong>‘z-index’</strong><br>值：   auto | &lt;integer&gt; | inherit<br>初始值：   auto<br>适用于：   定位元素<br>可否继承：   否<br>百分比：   N/A<br>媒介：   图形</p>
<p>对于一个定位盒，’z-index’属性指定了：</p>
<p>当前堆叠内容中盒的堆叠层次。<br>该盒子是否生成局部堆叠内容。<br>取值的含义如下：</p>
<p><span style="text-decoration: underline;"><strong>&lt;integer&gt; </strong></span><br>该整数是生成的盒在当前堆叠内容中的堆叠层次。该盒也生成了一个局部堆叠内容，在其中它的堆叠层次是’0’。<br><strong>auto </strong><br>生成的盒在当前堆叠内容中的堆叠层次和它的父盒相同。该盒不生成新的局部堆叠内容。</p>
<p>在该章节中,表达式”in front of”意思是更接近用户因为用户面对屏幕.</p>
<p>在CSS 2.1中,每个盒子在3个维度(dimensions)有个定位.除了水平和垂直的位置,盒子沿着”z-轴”展现并且被格式化成一个在其他的上面.当盒子在视觉上重叠了Z-轴定位特别地重要.这个章节谈论盒子怎样沿着z-轴定位.</p>
<p>渲染的树绘到canvas上的顺序描述是依照堆叠上下文.堆叠上下文能包含更深层的堆叠上下文.一个堆叠上下文从它的父级堆叠上下文的观点来看是原子的;在其它堆叠上下文的盒子可能不干涉它的任何盒子.</p>
<p>每个盒子属于一个堆叠上下文.每个定位的盒子在给出的堆叠上下文有一个整数的堆叠级别,堆叠级别是它在相同堆叠上下文里面z-轴相对于其它堆叠级别的位  置.有较大堆叠级别的盒子总是会被格式化在较低堆叠级别盒子的前面.盒子可以有负的堆叠级别.盒子在同样的堆叠上下文中有同样的堆叠级别根据文档树顺序由  后到前堆放.</p>
<p>根元素形成根堆叠上下文.其它由任意定位的元素生成(包含相对定位元素)的堆叠上下文有一个可计算的’z-index’值不同于’auto’.堆叠上下文不一定与包含块相关.在未来CSS的等级,其它属性可以引入堆叠上下文,例如<a href="http://www.w3.org/TR/css3-color/#transparency" target="_blank" rel="noopener">‘opacity’</a><a href="http://www.w3.org/TR/CSS21/refs.html#ref-CSS3COLOR" target="_blank" rel="noopener">[CSS3COLOR]</a>.</p>
<p>在每个堆叠上下文中,下面的层在从后到前的顺序中绘出:</p>
<ol>
<li>background和元素的borders形成堆叠上下文.</li>
<li>子堆叠上下文有负的堆叠级别(大多是负的在前面).</li>
<li>流内,非行内级别,非定位的后代.</li>
<li>非定位的浮动.</li>
<li>流内,行内级别,非定位后代,包含inline tables和inline 块.</li>
<li>堆叠级别为0的子堆叠上下文和堆叠级别为0的定位后代.</li>
<li>子堆叠上下文有正的堆叠级别(最小的正数优先)<br>在每个堆叠上下文,定位元素的堆叠级数为0(第6层),非定位浮动(第4层),内联块(5层),还有inline table(5层),被绘制好像那些元素本身生成新的堆叠上下文,除了它们定位的后代和任意将是子堆叠上下文参与当前的堆叠上下文.</li>
</ol>
<p>该绘制顺序递归地应用到每个堆叠上下文.该堆叠上下文绘制顺序的描述构成<a href="http://www.w3.org/TR/CSS21/zindex.html" target="_blank" rel="noopener">附录E</a>详细规范定义的概述.</p>
<p>在下面的例子中，各个盒（以它们的”id”属性命名）的堆叠层次是:<br>“text2”=0，”image”=1，”text3”=2，”text1”=3。”text2”的堆叠层次从它的根盒子继承而来。其它的由’z-index’属性指定。</p>
<p>&lt;!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”&gt;<br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Z-order positioning&lt;/TITLE&gt;<br>&lt;STYLE type=”text/css”&gt;<br>.pile {<br>position: absolute;<br>left: 2in;<br>top: 2in;<br>width: 3in;<br>height: 3in;<br>}<br>&lt;/STYLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;P&gt;<br>&lt;IMG id=”image”<br>src=”butterfly.gif” alt=”A butterfly image”<br>style=”z-index: 1”&gt;</p>
<p>&lt;DIV id=”text1”<br>style=”z-index: 3”&gt;<br>This text will overlay the butterfly image.<br>&lt;/DIV&gt;</p>
<p>&lt;DIV id=”text2”&gt;<br>This text will be beneath everything.<br>&lt;/DIV&gt;</p>
<p>&lt;DIV id=”text3”<br>style=”z-index: 2”&gt;<br>This text will underlay text1, but overlay the butterfly image<br>&lt;/DIV&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;</p>
<p>本例演示了透明的概念。一个盒子的缺省行为是允许在它后面的盒子透过它内容中透明的区域而可见。本例中，每个盒子透明地覆盖它下面的盒子。这一行为可以通过使用某个现成的<a href="http://www.w3.org/TR/CSS21/colors.html#background-properties" target="_blank" rel="noopener">背景属性</a>而被重写。</p>
<h4 id="9-10-文本方向：’direction’及’unicode-bidi’属性"><a href="#9-10-文本方向：’direction’及’unicode-bidi’属性" class="headerlink" title="9.10 文本方向：’direction’及’unicode-bidi’属性"></a>9.10 文本方向：’direction’及’unicode-bidi’属性</h4><p><a href="http://www.w3.org/TR/CSS21/conform.html#conformance" target="_blank" rel="noopener">遵照</a>用户端不支持双向文本可以忽略’direction’和’unicode-bidi’属性在该章节描述.该例外包括用户端简单地从右至左渲染字符.因为一个系统上的字体包含它们但是不支持从右到左文本方向的概念.</p>
<p>在某些脚本中，文字是从右到左书写的。某些文档中，特别是以阿拉伯或希伯来文写成的文档中，以及一些混合语言的内容中，单一(视觉上显示的)块中文字的排列也有不同的方向。这一现象称为双向排列或简称为“双向”。</p>
<p>Unicode标准(<a href="http://www.w3.org/TR/CSS21/refs.html#ref-UNICODE" target="_blank" rel="noopener">[UNICODE]</a>,<a href="http://www.w3.org/TR/CSS21/refs.html#ref-UAX9" target="_blank" rel="noopener">[UAX9]</a>)      定义了一个复杂的算法来确定文字正确的方向。该算法包含了基于字符属性的隐式部分，以及对于嵌入和重写的显式控制。CSS2依赖这一算法来获得正确的双向 渲染。’direction’及’unicode-bidi’属性允许作者规定文档语言的元素和属性如何与该算法相匹配.</p>
<p>用户端支持双向文本必须应用Unicode双向算法到每个行内级别盒的序列且该序列不被强制(<a href="http://www.unicode.org/reports/tr9/#Bidirectional_Character_Types" target="_blank" rel="noopener">bidi class B</a>) 中断或者块边界打断.这个序列在双向算法中形成”paragraph”(段落)单元.该段落嵌入级别通过包含块的<a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction" target="_blank" rel="noopener">‘direction’</a>属性的值进行设置而不是通过Unicode算法在步骤P2和P3中给出的启发式heuristic来设置.</p>
<p>由于文字的方向性取决于文档语言的结构和语意，在大多数情况下，这些属性应该只由文档类型描述（DTD）的设计者或特殊文档的作者使用。如果一个缺 省样式表指定了这些属性，作者和用户不应该指定重写它们的规则。一个常见的例外可能是，如果一个用户端在用户的要求下将犹太语（通常以希伯来字母写成）音 译为拉    丁字母时，用户端重写了双向表现。</p>
<p>HTML  4.0规范（[HTML40]，8.2节）定义了HTML元素的双向排列行为。一致的HTML用户端可能在作者和用户的样式表里忽略 ‘direction’和’unicode-bidi’属性。在<a href="http://www.w3.org/TR/CSS21/refs.html#ref-HTML4" target="_blank" rel="noopener">[HTML40]</a>中指定的那些可能产生双向行为的规则出现在<a href="http://www.w3.org/TR/CSS21/sample.html#bidi" target="_blank" rel="noopener">示例样式表</a>中。HTML  4.0规范也包含了有关双向排列事项的更多的信息。</p>
<p><strong>‘direction’ </strong><br>值：   ltr | rtl | inherit<br>初始值：   ltr<br>适用于：   所有元素，但参见描述<br>可否继承：   可<br>百分比：   N/A<br>媒介：   图形</p>
<p>该属性指定了块的基本书写方向，以及Unicode双向算法中嵌入和超越的方向（参见’unicode-bidi’）。另外，它还规定了表格列布局的方向，水平溢出的方向，以及块设置了’text-align: justify’时，最后一个不完全的行的位置。</p>
<p>该属性取值的含义如下：</p>
<p><strong>ltr </strong><br>左到右的方向。<br><strong>rtl </strong><br>右到左的方向。<br>要使’direction’属性对行内元素有影响，’unicode-bidi’属性的值必须是’embed’或’override’。</p>
<p><strong>注意.</strong>‘direction’属性指定给表格列元素时，并不被列内的单元格继承，这是因为列不存在于文档树中。因此，对于<a href="http://www.w3.org/TR/CSS21/refs.html#ref-HTML4" target="_blank" rel="noopener">[HTML4]</a>，11.3.2.1节中描述的”dir”属性的继承规则，CSS不可能很容易地保持.</p>
<p><strong>‘unicode-bidi’ </strong><br>值：   normal | embed | bidi-override | inherit<br>初始值：   normal<br>适用于：   所有元素，但参见描述<br>可否继承：   no<br>百分比：   N/A<br>媒介：   图形</p>
<p>该属性取值的含义如下：</p>
<p><strong>normal </strong><br>基于双向算法，元素不打开一个额外的嵌入层次。对于行内元素，在元素的边界中隐含了重排列的工作。<br><strong>embed </strong><br>如果元素是行内的，基于双向算法，该值打开一个额外的嵌入层次。该嵌入层次的方向由’direction’属性给出。在元素内，重排列隐式地完成。这相当     于在元素的开头加入一个LRE（U+202A；对于’direction: ltr’）或RLE（U+202B；对于’direction:      rtl’），在元素的结尾加入一个PDF（U+202C）。<br><strong>bidi-override </strong><br>如果元素是行内的，或者是只包含行内元素的块类元素，该值创建一个超越。这意味着在元素内，重排列严格按照’direction’属性的顺序；双向算法的     隐式部分被忽略。这相当于在元素的开头加入一个LRO（U+202D；对于’direction:      ltr’）或RLO（U+202E；对于’direction: rtl’），在元素的结尾加入一个PDF（U+202C）。<br>每一个块类元素的字符的最终的顺序就如同：双向控制代码如上所述加入，标记被剥离，结果的字符顺序传递给用于普通文字的Unicode双向算法实现，该实     现产生和样式文本一样的分行。在这一处理中，非文字实体如图形被认为是中性字符，除非它们的’unicode-bidi’属性不是设置为     ‘normal’。在这一情况下，它们被认为是为该元素指定的’direction’中的重要字符。</p>
<p>请注意，为了能够在一个单一方向（要么全部左到右，要么全部右到左）中排列行内盒，必须创建更多的行内盒(包括匿名行内盒)，而且某些行内盒在排列之前，可能必须分割或重排。</p>
<p>由于Unicode算法限制嵌入的层次为15层，将’unicode-bidi’设置为非’normal’的使用，必须小心，除非确定是合适的。特别地，    使用’inherit’值时要特别小心。不过，对于那些一般来说显示为块的元素，更应该设置’unicode-bidi:     embed’，这样在显示改变到行内时，可以将元素保持在一起（见下例）。</p>
<p>下面的例子显示了包含双向文字的一个XML文档。它演示了一个重要的设计原则：DTD设计者应该在语言语言（元素和属性）和任何相关联的样式表中考虑双向    因素。样式表的设计应该是双向规则和其它样式表规则分离。双向规则不应该被其它样式表规则超越，从而文档语言或DTD的双向行为得以保留。</p>
<p>例子：</p>
<p>本例中，小写字母表示左到右的字符而大写字母表示右到左的字符：</p>
<p>&lt;HEBREW&gt;<br>&lt;PAR&gt;HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5&lt;/PAR&gt;<br>&lt;PAR&gt;HEBREW6 &lt;EMPH&gt;HEBREW7&lt;/EMPH&gt; HEBREW8&lt;/PAR&gt;<br>&lt;/HEBREW&gt;<br>&lt;ENGLISH&gt;<br>&lt;PAR&gt;english9 english10 english11 HEBREW12 HEBREW13&lt;/PAR&gt;<br>&lt;PAR&gt;english14 english15 english16&lt;/PAR&gt;<br>&lt;PAR&gt;english17 &lt;HE-QUO&gt;HEBREW18 english19 HEBREW20&lt;/HE-QUO&gt;&lt;/PAR&gt;<br>&lt;/ENGLISH&gt;</p>
<p>由于这是一个XML，样式表负责设置书写方向。样式表如下：</p>
<p>/<em> Rules for bidi </em>/<br>HEBREW, HE-QUO  {direction: rtl; unicode-bidi: embed}<br>ENGLISH {direction: ltr; unicode-bidi: embed}</p>
<p>/<em> Rules for presentation </em>/<br>HEBREW, ENGLISH, PAR  {display: block}<br>EMPH {font-weight: bold}</p>
<p>HEBREW元素是一个块，基本方向是右到左，ENGLISH元素是一个块，基本方向是左到右。PAR元素是块，基本方向从父元素继承。因此，前两个     PAR从右顶部开始阅读，最后的三个从左顶布开始阅读。请注意元素名选择HEBREW和ENGLISH只是为了明显表示而已；一般情况下，元素名应该反映    结构而不反映语言。</p>
<p>EMPH元素是行内元素，而且它的’unicode-bidi’设置为’normal’（初始值），它对文字的排列没有影响。另一方面，HE-QUO元素创建一个嵌入。</p>
<p>如果行宽足够的长，这些文字的格式化效果可能是：</p>
<p>5WERBEH 4WERBEH english3 2WERBEH 1WERBEH</p>
<p>8WERBEH 7WERBEH 6WERBEH</p>
<p>english9 english10 english11 13WERBEH 12WERBEH</p>
<p>english14 english15 english16</p>
<p>english17 20WERBEH english19 18WERBEH</p>
<p>注意，HE-QUO嵌入使HEBREW18出现在english19之右。</p>
<p>如果需要分行，可能效果是：</p>
<p>2WERBEH 1WERBEH<br>-EH 4WERBEH english3<br>5WERB</p>
<p>-EH 7WERBEH 6WERBEH<br>8WERB</p>
<p>english9 english10 en-<br>glish11 12WERBEH<br>13WERBEH</p>
<p>english14 english15<br>english16</p>
<p>english17 18WERBEH<br>20WERBEH english19</p>
<p>由于HEBREW18必须在english19前阅读，它在english19所在行的上面。仅仅是在前一格式化例子中分割长行不会有用。还要注意    english19的第一个音节可能可以放在上一行中。但是，为了避免在一行的中间出现一个连字符，在右到左的内容中，左到右单词的连字通常被禁止。反之  亦然。</p>

      
    </div>
    <footer class="article-footer">
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/w3c标准/">w3c标准</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/翻译/">翻译</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2011/08/29/javascript-e4-b8-ad-e5-af-b9-e8-b1-a1-e7-bb-a7-e6-89-bf-inheritance-in-javascript/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          javascript中对象继承_inheritance in javascript
        
      </div>
    </a>
  
  
    <a href="/2011/08/02/javacript-e4-b8-ad-e6-9e-84-e5-bb-ba-e5-af-b9-e8-b1-a1-e7-9a-84-e8-8c-83-e5-bc-8f-defining-classes-and-objects-in-javacript/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">javacript中构建对象的范式_Defining Classes and Objects in javacript</div>
    </a>
  
</nav>

  


<div class="ds-thread" data-thread-key="2011/08/19/css2-e4-b8-ad-e7-9a-84-e5-8f-af-e8-a7-86-e5-8c-96-e6-a0-bc-e5-bc-8f-e6-a8-a1-e5-9e-8b2-visual-fomatting-model-in-css22/"></div>

</article></section>
        
          <aside id="sidebar">
  
    <div class="widget-wrap">
  <h3 class="widget-title">Github</h3>
  <div class="widget">
    <ul class="category-list"><li class="category-list-item"><a href="https://github.com/rainzhai">https://github.com/rainzhai</a></li></ul>
  </div>
</div>

  <div class="widget-wrap">
    <h3 class="widget-title">分类 Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/">CSS &amp; HTML</a><span class="category-list-count">29</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/html5/">html5</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/javascript-amp-Ajax/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/">web development</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/CSS-amp-HTML/web-development/移动端开发/">移动端开发</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/blog/">blog</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/">computer science</a><span class="category-list-count">10</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/java-web/">java web</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/web-development/">web development</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/computer-science/算法/">算法</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/html5/">html5</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/">hybrid</a><span class="category-list-count">2</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/hybrid/phonegap/">phonegap</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/java-web/">java web</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/">javascript &amp; Ajax</a><span class="category-list-count">23</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/">jquery</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/jquery/web-development/">web development</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/web-development/">web development</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript-amp-Ajax/算法/">算法</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/jquery/">jquery</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/nodejs/">nodejs</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/php/">php</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/web-development/">web development</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/">智趣</a><span class="category-list-count">5</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/游戏/">游戏</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/智趣/生活/">生活</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/未分类/">未分类</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/模块化/">模块化</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/游戏/">游戏</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/生活/">生活</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/资源/">资源</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签 Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Angularjs/">Angularjs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS-3/">CSS 3</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/D2/">D2</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DIY/">DIY</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Design/">Design</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Structure/">Structure</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/android/">android</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/app/">app</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/blog/">blog</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bug/">bug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/css3/">css3</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/debug/">debug</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/dojo/">dojo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/easy-ui/">easy ui</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/firefox/">firefox</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/flash/">flash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/free-hosting/">free hosting</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/game/">game</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/geekTime/">geekTime</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html/">html</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/html5/">html5</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hybrid/">hybrid</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ie/">ie</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ios/">ios</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">9</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">28</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery/">jquery</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jquery-mobile/">jquery mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jsp/">jsp</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mobile/">mobile</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nodejs/">nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/npm/">npm</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/photos/">photos</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/php/">php</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/requirejs/">requirejs</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seam/">seam</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/svg/">svg</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/threejs/">threejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ued/">ued</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/w3c标准/">w3c标准</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/web/">web</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webapp/">webapp</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webgl/">webgl</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/webpage/">webpage</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/wordpress/">wordpress</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/上下文/">上下文</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分享/">分享</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端-Javascript-css-ES6/">前端 Javascript css ES6</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/学习/">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/性能/">性能</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/总结/">总结</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/效率/">效率</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/模块化/">模块化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/游戏/">游戏</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/理论/">理论</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/生活/">生活</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/社会化网络/">社会化网络</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动/">移动</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/移动端开发/">移动端开发</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/算法/">算法</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/编程/">编程</a><span class="tag-list-count">18</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/美女/">美女</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/翻译/">翻译</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/范式/">范式</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/设计模式/">设计模式</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语义网/">语义网</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/语言/">语言</a><span class="tag-list-count">21</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/资源/">资源</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/转载/">转载</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面向对象/">面向对象</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/风景/">风景</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">标签云 Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Angularjs/" style="font-size: 10px;">Angularjs</a> <a href="/tags/CSS/" style="font-size: 19.09px;">CSS</a> <a href="/tags/CSS-3/" style="font-size: 13.64px;">CSS 3</a> <a href="/tags/D2/" style="font-size: 10px;">D2</a> <a href="/tags/DIY/" style="font-size: 10px;">DIY</a> <a href="/tags/Design/" style="font-size: 10.91px;">Design</a> <a href="/tags/Structure/" style="font-size: 16.36px;">Structure</a> <a href="/tags/android/" style="font-size: 10px;">android</a> <a href="/tags/app/" style="font-size: 10px;">app</a> <a href="/tags/blog/" style="font-size: 10.91px;">blog</a> <a href="/tags/bug/" style="font-size: 10px;">bug</a> <a href="/tags/css3/" style="font-size: 14.55px;">css3</a> <a href="/tags/debug/" style="font-size: 10px;">debug</a> <a href="/tags/dojo/" style="font-size: 10px;">dojo</a> <a href="/tags/easy-ui/" style="font-size: 10px;">easy ui</a> <a href="/tags/firefox/" style="font-size: 10px;">firefox</a> <a href="/tags/flash/" style="font-size: 10px;">flash</a> <a href="/tags/free-hosting/" style="font-size: 10px;">free hosting</a> <a href="/tags/game/" style="font-size: 10px;">game</a> <a href="/tags/geekTime/" style="font-size: 10px;">geekTime</a> <a href="/tags/html/" style="font-size: 13.64px;">html</a> <a href="/tags/html5/" style="font-size: 18.18px;">html5</a> <a href="/tags/hybrid/" style="font-size: 11.82px;">hybrid</a> <a href="/tags/ie/" style="font-size: 10.91px;">ie</a> <a href="/tags/ios/" style="font-size: 10px;">ios</a> <a href="/tags/java/" style="font-size: 17.27px;">java</a> <a href="/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/tags/jquery/" style="font-size: 15.45px;">jquery</a> <a href="/tags/jquery-mobile/" style="font-size: 10.91px;">jquery mobile</a> <a href="/tags/jsp/" style="font-size: 10px;">jsp</a> <a href="/tags/mobile/" style="font-size: 10.91px;">mobile</a> <a href="/tags/nodejs/" style="font-size: 10px;">nodejs</a> <a href="/tags/npm/" style="font-size: 10px;">npm</a> <a href="/tags/photos/" style="font-size: 10px;">photos</a> <a href="/tags/php/" style="font-size: 10px;">php</a> <a href="/tags/requirejs/" style="font-size: 10.91px;">requirejs</a> <a href="/tags/seam/" style="font-size: 10.91px;">seam</a> <a href="/tags/svg/" style="font-size: 10px;">svg</a> <a href="/tags/threejs/" style="font-size: 10px;">threejs</a> <a href="/tags/ued/" style="font-size: 10.91px;">ued</a> <a href="/tags/w3c标准/" style="font-size: 12.73px;">w3c标准</a> <a href="/tags/web/" style="font-size: 13.64px;">web</a> <a href="/tags/webapp/" style="font-size: 10.91px;">webapp</a> <a href="/tags/webgl/" style="font-size: 10px;">webgl</a> <a href="/tags/webpage/" style="font-size: 10.91px;">webpage</a> <a href="/tags/wordpress/" style="font-size: 11.82px;">wordpress</a> <a href="/tags/上下文/" style="font-size: 10px;">上下文</a> <a href="/tags/分享/" style="font-size: 10.91px;">分享</a> <a href="/tags/前端/" style="font-size: 16.36px;">前端</a> <a href="/tags/前端-Javascript-css-ES6/" style="font-size: 10px;">前端 Javascript css ES6</a> <a href="/tags/学习/" style="font-size: 10px;">学习</a> <a href="/tags/性能/" style="font-size: 12.73px;">性能</a> <a href="/tags/总结/" style="font-size: 10.91px;">总结</a> <a href="/tags/效率/" style="font-size: 11.82px;">效率</a> <a href="/tags/模块化/" style="font-size: 10.91px;">模块化</a> <a href="/tags/游戏/" style="font-size: 11.82px;">游戏</a> <a href="/tags/理论/" style="font-size: 14.55px;">理论</a> <a href="/tags/生活/" style="font-size: 10.91px;">生活</a> <a href="/tags/社会化网络/" style="font-size: 10.91px;">社会化网络</a> <a href="/tags/移动/" style="font-size: 10px;">移动</a> <a href="/tags/移动端开发/" style="font-size: 10px;">移动端开发</a> <a href="/tags/算法/" style="font-size: 13.64px;">算法</a> <a href="/tags/编程/" style="font-size: 18.18px;">编程</a> <a href="/tags/美女/" style="font-size: 10px;">美女</a> <a href="/tags/翻译/" style="font-size: 13.64px;">翻译</a> <a href="/tags/范式/" style="font-size: 12.73px;">范式</a> <a href="/tags/设计模式/" style="font-size: 11.82px;">设计模式</a> <a href="/tags/语义网/" style="font-size: 10px;">语义网</a> <a href="/tags/语言/" style="font-size: 19.09px;">语言</a> <a href="/tags/资源/" style="font-size: 10.91px;">资源</a> <a href="/tags/转载/" style="font-size: 10px;">转载</a> <a href="/tags/面向对象/" style="font-size: 10px;">面向对象</a> <a href="/tags/风景/" style="font-size: 10px;">风景</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">文章 Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/07/">July 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">June 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">August 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/07/">July 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/04/">April 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">March 2016</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/08/">August 2015</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2015/03/">March 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/11/">November 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/10/">October 2014</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/05/">May 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/04/">April 2014</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/03/">March 2014</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/02/">February 2014</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2014/01/">January 2014</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/12/">December 2013</a><span class="archive-list-count">9</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/11/">November 2013</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/10/">October 2013</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/09/">September 2013</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/08/">August 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/07/">July 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/06/">June 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/05/">May 2013</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/03/">March 2013</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2013/01/">January 2013</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/11/">November 2012</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/08/">August 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/06/">June 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/05/">May 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/04/">April 2012</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/03/">March 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/02/">February 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2012/01/">January 2012</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/12/">December 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/11/">November 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/10/">October 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/09/">September 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/08/">August 2011</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/07/">July 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/06/">June 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/04/">April 2011</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/02/">February 2011</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2011/01/">January 2011</a><span class="archive-list-count">5</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/12/">December 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/11/">November 2010</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/10/">October 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/09/">September 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/08/">August 2010</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/06/">June 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/04/">April 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2010/01/">January 2010</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2009/08/">August 2009</a><span class="archive-list-count">1</span></li></ul>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">最近 Recents</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2018/07/23/nvm安装问题处理-nvm-is-not-compatible-with-the-npm-config-prefix-option-错误/">nvm安装问题处理 nvm is not compatible with the npm config prefix option 错误</a>
          </li>
        
          <li>
            <a href="/2018/06/06/前端知识体系大全/">前端知识体系大全</a>
          </li>
        
          <li>
            <a href="/2016/08/28/使用Angularjs开发控制台类项目/">使用Angularjs开发控制台类项目</a>
          </li>
        
          <li>
            <a href="/2016/07/11/Apicloud开发app的问题总结/">Apicloud开发app的问题总结</a>
          </li>
        
          <li>
            <a href="/2016/04/25/前端面试经典问题/">前端面试经典问题</a>
          </li>
        
      </ul>
    </div>
  </div>

  
      <div class="widget-wrap">
<h3 class="widget-title">友情链接 Links</h3>
<div class="widget">
<ul>
<li><a href="http://wande.me" title="玩的么" target="_blank">玩的么</a></li>
</ul>
</ul>
</div>
  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2018 宅鱼<br>
      更多游戏： <a href="http://wande.me"  target="_blank">玩的么</a><br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">首页</a>
  
    <a href="/archives" class="mobile-nav-link">文章</a>
  
    <a href="/raincss" class="mobile-nav-link">RainCSS</a>
  
</nav>
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"rainzhai"};
  (function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
  })();
  </script>
<!-- 多说公共JS代码 end -->

<script type="text/javascript" src="http://wandeme.com/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F49ba6eabd43121d820d9120777bdaf30' type='text/javascript'%3E%3C/script%3E"));
</script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>

  </div>
</body>
</html>